<template>
    <view :style="{height: isFixed ? height + 'px' : 'auto'}">
        <view :class="{'statusFixed':isFixed}" :style="{top:offsetTop+'rpx',zIndex: zIndex,width: width == 'auto' ? 'auto' : width + 'px',}" id="wlk__sticky">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'wlk-sticky',
        props:{
            // 距离顶部多高吸顶，单位rpx
            offsetTop: {
                type: [Number, String],
                default: 0
            },
            // 图层
            zIndex:{
                type: [Number,String],
                default: 10
            },
            // 滚动条参数
            scrollTop: {
                type: Number,
                default: 0
            },
            // 是否开启吸顶功能
            enable: {
                type: Boolean,
                default: true
            },
            navBarH: {
                type: [Number,String],
                default: 44
            },
            borderHeight:{
                type:Number,
                default:0,
            },
        },
        watch:{
            borderHeight(val){
                if(this.enable){
                    this.getStickyH('#wlk__sticky');
                }
            },
            scrollTop(val){
                if(val > this.viewH){
                    val = this.viewH;
                }
                if(val==this.viewH && this.enable){
                    this.isFixed = true;
                    if(this.fixedTop==0){
                        this.fixedTop = val;
                    }

                }else{
                    this.isFixed = false;
                }
                this.returnParams();
            },
            enable(val){
                if(val == false){
                    this.isFixed = false;
                }
            },
        },
        data(){
            return {
                viewH:0,// 获取元素距离顶部的高度
                isFixed:false,//是否吸顶
                height: 'auto',
                width: 'auto',
                fixedTop:0
            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.getStickyH('#wlk__sticky');
            })
        },
        methods:{
            returnParams(){
                this.$emit('returnParams',this.isFixed,this.fixedTop);
            },
            // 获取元素距离顶部的高度
            getStickyH(id) {
                var that = this;
                var query = uni.createSelectorQuery().in(that);
                query.selectViewport().scrollOffset()
                query.select(id).boundingClientRect();
                query.exec(function(res) {
                    // #ifndef H5
                    that.viewH = res[0].scrollTop + res[1].top - uni.upx2px(that.offsetTop);
                    // #endif
                    // #ifdef H5
                    that.viewH = res[0].scrollTop + res[1].top - uni.upx2px(that.offsetTop);
                    // #endif
                    that.height = res[1].height
                    that.width = res[1].width
                });
            },

        }
    }
</script>

<style lang="scss" scoped>
    .statusFixed{
        position: fixed;
        top:0;
        left: 0;
        right: 0;
        z-index: 10;
    }
</style>
